<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '首页',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view>
    <g-navbar title="轻食记">
      <template #left>
        <image src="/static/icon/menu.png" class="w-45rpx h-45rpx" mode="scaleToFill" />
      </template>
    </g-navbar>
    <view class="container px-6 py-6 box-border">
      <view class="today-card shadow-lg bg-#fff p-5 rounded-2xl">
        <view class="card-top flex justify-between items-center">
          <view>
            <view class="title text-35rpx font-bold text-text-primary">今日热量摄入</view>
            <text class="desc-text mt-10rpx">根据您的健康目标计算</text>
          </view>
          <view
            class="logo rounded-full bg-#e7f4e8 w-90rpx h-90rpx flex justify-center items-center"
          >
            <image
              src="/static/icon/fire.png"
              @click="handleClick"
              class="w-60rpx h-60rpx"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="progress">
          <progress-com :progress="progress" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import progressCom from '@/components/g-progress/progress.vue'
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})
const progress = ref(0)
onShow(() => {
  const curPages = getCurrentPages()[0] // 获取当前页面实例
  // @ts-ignore
  if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
    // @ts-ignore
    curPages.getTabBar().setData({
      selected: 0, // 表示当前菜单的索引，该值在不同的页面表示不同
    })
  }
})
function handleClick() {
  progress.value = progress.value + 10
}
</script>

<style>
page {
  background: var(--primaryLighter);
}
</style>
<style lang="scss" scoped></style>
